<template>
    <el-card class="box-card">
        <el-form ref="userAddForm" :model="userAddForm" :rules="rules" label-position="left" label-width="60px">
            <el-row :gutter="200">
                <el-col :span="8">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="userAddForm.name" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="userAddForm.username" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="200">
                <el-col :span="8">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="userAddForm.email" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="userAddForm.phone" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="200">
                <el-col :span="8">
                    <el-form-item label="地址" prop="city">
                        <el-input v-model="userAddForm.city" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="邮编" prop="zipcode">
                        <el-input v-model="userAddForm.zipcode" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-button type="primary" @click="submitForm('userAddForm')">提交</el-button>
        <el-button @click="resetForm('userAddForm')">重置</el-button>
    </el-card>
</template>

<script>

export default {
    data() {
        var validateName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("姓名不能为空！"));
            } else {
                return callback();
            }
        }
        var validateUserName = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户名不能为空！"));
            } else {
                callback();
            }
        };
        var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
        var validatePhone = (rule, value, callback) => {
            if (!value) {
                callback(new Error("联系电话不能为空！"));
            }
            setTimeout(() => {
                if (!phoneReg.test(value)) {
                    callback(new Error('请输入正确的号码！'));
                } else {
                    callback();
                }
            }, 1000);
        }
        var validateEmail = (rule, value, callback) => {
            if (!value) {
                callback(new Error("邮箱不能为空！"));
            } else {
                callback();
            }
        }

        var validateCity = (rule, value, callback) => {
            if (!value) {
                callback(new Error("地址不能为空！"));
            } else {
                callback();
            }
        }
        var validateZipCode = (rule, value, callback) => {
            if (!value) {
                callback(new Error("邮编不能为空！"));
            } else {
                callback();
            }
        }
        return {
            userInfo: [],
            userAddForm: {
                name: '',
                username: '',
                email: '',
                phone: '',
                city: '',
                zipcode: ''
            },
            rules: {
                name: [{ validator: validateName, trigger: 'blur' }],
                username: [{ validator: validateUserName, trigger: 'blur' }],
                phone: [{ validator: validatePhone, trigger: 'blur' }],
                email: [{ validator: validateEmail, trigger: 'blur' }],
                city: [{ validator: validateCity, trigger: 'blur' }],
                zipcode: [{ validator: validateZipCode, trigger: 'blur' }],
            }
        }
    },
    created() {
        this.query();
    },
    methods: {
        query() {
            fetch('http://47.241.102.141:3000/users')
                .then((response) => response.json())
                .then(data => {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].id == this.$route.params.id) {
                            this.userInfo.push(data[i]);
                        }
                    }
                });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.axios.post('http://47.241.102.141:3000/users',
                        {
                            name: this.userAddForm.name,
                            username: this.userAddForm.username,
                            email: this.userAddForm.email,
                            phone: this.userAddForm.phone,
                            address: { city: this.userAddForm.city, zipcode: this.userAddForm.zipcode }
                        },
                        {
                            headers: { 'Content-Type': 'application/json', }
                        })
                        .then((result) => {
                            this.$router.push('/dashboard/users');
                            console.log("result" + result);
                        })
                    alert('提交成功!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // submitForm() {
        //     this.axios.post('http://47.241.102.141:3000/users',{
        //             name:this.userAddForm.name,
        //             username:this.userAddForm.username,
        //             email:this.userAddForm.email,
        //             phone:this.userAddForm.phone,
        //             address:{city:this.userAddForm.city,}

        //         },
        //         {
        //             headers:{
        //                 'Content-Type': 'application/json',
        //             }
        //         }
        //         )
        //         .then((result) => {
        //             console.log("result" + result);
        //         }) 

        // },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
}
</script>

<style>
.box-card {
    width: 80%;
    min-height: 50%;
    float: left;
}

.el-input {
    width: 300px;
}

.el-button {
    margin-left: 60px;
    margin-top: 30px;
    float: left;
}

.el-button:nth-of-type(2) {
    margin-left: 80px;
    float: left;
}
</style>